<template>
  <div>
    <Header></Header>
    <!--发布游记开始-->
    <div class="editBox w1200 bc b87 bg100 pb50 mt30 mb30 " >
      <h1 class="w h40 bg95 c_grn_119c5b fb f14 lh40 bb87"><img src="static/images/write.png"  class="ml20 mr10 vm"/>发布游记</h1>
      <table class=" edit_tb f14 lh24 mt40  ml50 mr50">
        <col class="w140"/>
        <col />
        <!--活动地址-->
        <tr >
          <td class="tr vt">
            <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>游记心得:</span>
          </td>
          <td class="clearfix">
            <textarea class="b87 br2 f14 lh180 t1 h200 p10 w790" style="display: block;" name="#" v-model="travelData['summarize']" rows="" cols="" placeholder="请把你的游记心得分享给其他爱好者(500字以内)"></textarea>
          </td>
        </tr>
        <tr >
          <td class="tr vt">
            <span class="inline-block c20 w100 h40 lh40 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5"></i>游记地址:</span>
          </td>
          <td class="clearfix">
            <div id="mapCon"></div>
            <input class="w790 h40  f12 lh40 c40 t1 b87" v-model="travelData.address" readonly type="text" name="" id="" value="" />
          </td>
        </tr>
        <!--上传游记图片、视频-->
        <tr>
          <td class="tr vt" style="padding-bottom:0;">
            <span class="inline-block c20 w120 h24 mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>上传图片、视频:</span>
          </td>
          <td class="pb5 clearfix vt" style="padding-bottom:0;">
            <a href="javascript:void(0);" class="fl f12 c40 addIcon h40 lh40 pl40 pr20 mr20 mb20 b_grn_119c5b br2 pointer addPlaceBtn" @click="addPic">继续添加</a>
          </td>
        </tr>
        <!--添加图片视频弹出框-->
        <tr v-show="placeAddState">
          <td class="tr vt"></td>
          <td >
            <!--添加图片视频弹出框主体-->
            <div class="fl pr p20  br2 bg100 b_org_f16113 addPicBox">
              <img  class="pa orgArr_up" src="static/images/org_arrow_up.png" width="28" height="18"/>
              <table class="" style="width:100%;">
                <tr>
                  <wwUpload @reloadImg="reloadImg" @uploadStateFun="uploadStateFun"></wwUpload>
                  <ul class="UploadList" v-show="picList.length>0">
                    <li v-for="(item, index) in picList">
                      <p class="playBtn" v-if="item.flag==2"></p>
                      <img :src="(item.flag==1)?item['fileName']:item['thumFileName']" alt="">
                      <textarea name="" cols="30" rows="10" v-model="item['description']"></textarea>
                      <span class="delShow" @click="deleteRoutPic(index)">删除</span>
                    </li>
                  </ul>
                </tr>
                <!--添加按钮-->
                <tr style="width:100%;">
                  <td>
                    <a href="javascript:void(0);" class="inline-block w100 h40 fm f12 c100 lh40 tc letter2 bg_grn_119c5b mt20  b2 hoverbg_orgred surePicBtn" @click="surePicFun">确定</a>
                  </td>
                </tr>
              </table>
            </div><!--添加图片视频弹出框主体结束-->
          </td>
        </tr><!--添加图片视频弹出框结束-->
        <!--添加好的图片-->
        <tr>
          <td class="tr vt">
            <span class="inline-block c20 w100 h24 mr20"></span>
          </td>
          <td>
            <div class="fl w150 mr20 mb10 " v-for="(item, index) in travelData['listTravelsResource']">
              <a  class="block  w150 h90 pr"><img :src="(item['flag']==1)?item['fileName']:item['thumFileName']" width="150" height="90"/><i class="redCloseX" @click="deletePics(index)"></i></a>
              <h5 class="mt5 fm_songti f12 lh150 c20 tc overflow">{{item['description']}}</h5>
              <p class="playBtn routePlayBtn" v-if="item['flag']==2"></p>
            </div>
          </td>
        </tr>
        <!--关联场地-->
        <tr>
          <td class="tr vt " style="padding-bottom:0;">
            <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5"></i>关联场地:</span>
          </td>
          <td class="clearfix vt pb10" style="padding-bottom:0;">
            <a href="javascript:void(0);" class="fl f12 c40 addIcon h40 pl40 lh40 pr20 mr20 mb20 b_grn_119c5b br2 pointer addPlaceBtn" @click="addPlace">继续添加</a>
            <a href="javascript:void(0);" v-for="(item, index) in selectPlaceName" class="fl f12 h40 pl20 pr20 mr20 mb20  bg_grn_119c5b br2 fm_songti  lh40 c100 pr hoverbg_org">{{item['name']}}
              <i class="redCloseX" @click="delPlace(index)"></i>
            </a>
          </td>
        </tr><!--活动场地结束-->
        <!--选择场地弹出框-->
        <tr class="" v-show="addshowState">
          <td class="tr vt"></td>
          <td >
            <!--场地 弹出框 主体-->
            <div class="fl pr p20  br2 bg100 b_org_f16113 w790">
              <img  class="pa orgArr_up" src="static/images/org_arrow_up.png" width="28" height="18"/>
              <table class="pr60 " style="width: 100%;">
                <tr>
                  <td class="tr vt" style="padding-bottom:20px;">
                    <span class="inline-block c20 w100 h40 mr20 lh40">选择场地:</span>
                  </td>
                  <td style="padding-bottom:20px;">
                    <el-select v-model="placeAreaData['seleprovince']" placeholder="请选择" @change="selectFunPlace" style="width:215px;">
                      <el-option
                        v-for="(item,index) in province"
                        :key="item.value"
                        :label="item.label"
                        :value="index+'|province'">
                      </el-option>
                    </el-select>
                    <el-select v-model="placeAreaData['selecity']" placeholder="请选择" @change="selectFunPlace" style="width:215px;">
                      <el-option
                        v-for="(item,index) in placeAreaData['city']"
                        :key="item.value"
                        :label="item.label"
                        :value="index+'|city'">
                      </el-option>
                    </el-select>
                  </td>
                </tr>

                <tr>
                  <td class="tr vt" style="padding-bottom:20px;">
                  </td>
                  <td style="padding-bottom:20px;">
                    <el-radio-group v-model="selectPlace" @change="handleSelectPlaceFun">
                      <el-radio v-for="list in placeList" :label="list.id" style="width:145px;margin-right:5px;margin-left:0px;margin-bottom:10px;overflow: hidden" :title="list.placeName">{{list.placeName}}</el-radio>
                    </el-radio-group>
                  </td>
                </tr>

                <!--添加按钮-->
                <tr>
                  <td class="tr vt">
                    <span class="inline-block c20 w100 h24 mr20"></span>
                  </td>
                  <td>
                    <a href="javascript:void(0);" class="fr inline-block w100 h40 fm f12 c100 lh40 tc letter2 bg_grn_119c5b  b2 hoverbg_orgred" @click="surePlaceBtn">确定</a>
                  </td>
                </tr>
              </table>
            </div><!--场地 弹出框结束-->
          </td>
        </tr><!--选择场地弹出框结束-->
        <!--关联场地-->
        <tr>
          <td class="tr vt " style="padding-bottom:0;">
            <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5"></i>关联轨迹:</span>
          </td>
          <td class="clearfix vt pb10" style="padding-bottom:0;">
            <a href="javascript:void(0);" class="fl f12 c40 addIcon h40 pl40 lh40 pr20 mr20 mb20 b_grn_119c5b br2 pointer addPlaceBtn" @click="addMotion">继续添加</a>
            <a href="javascript:void(0);" v-for="(item, index) in selectMotionName" class="fl f12 h40 pl20 pr20 mr20 mb20  bg_grn_119c5b br2 fm_songti  lh40 c100 pr hoverbg_org">{{item['name']}}
              <i class="redCloseX" @click="delMotion(index)"></i>
            </a>
          </td>
        </tr>
        <!--选择轨迹弹出框-->
        <tr class="" v-show="motionState">
          <td class="tr vt"></td>
          <td >
            <!--场地 弹出框 主体-->
            <div class="fl pr p20  br2 bg100 b_org_f16113 w790">
              <img  class="pa orgArr_up" src="static/images/org_arrow_up.png" width="28" height="18"/>
              <table class="pr60 " style="width: 100%;">
                <tr>
                  <td class="tr vt" style="padding-bottom:20px;">
                    <span class="inline-block c20 w100 h40 mr20 lh40">选择轨迹:</span>
                  </td>
                </tr>

                <tr>
                  <td class="tr vt" style="padding-bottom:20px;">
                  </td>
                  <td style="padding-bottom:20px;">
                    <el-radio-group v-model="seleMotionList" @change="handleSelectMotionFun">
                      <el-radio v-for="list in motionList" :label="list.id" style="width:145px;margin-right:5px;margin-left:0px;overflow: hidden;margin-bottom: 10px;" :title="list.motionName">{{list.motionName}}</el-radio>
                    </el-radio-group>
                  </td>
                </tr>

                <!--添加按钮-->
                <tr>
                  <td class="tr vt">
                    <span class="inline-block c20 w100 h24 mr20"></span>
                  </td>
                  <td>
                    <a href="javascript:void(0);" class="fr inline-block w100 h40 fm f12 c100 lh40 tc letter2 bg_grn_119c5b  b2 hoverbg_orgred" @click="sureMotionBtn">确定</a>
                  </td>
                </tr>
              </table>
            </div><!--场地 弹出框结束-->
          </td>
        </tr><!--选择场地弹出框结束-->
        <!--发布游记按钮-->
        <tr>
          <td class="tr vt ">
            <span class="inline-block c20 w100 h24 mr20"></span>
          </td>
          <td>
            <a href="javascript:void(0);" class="inline-block w160 h40 fm_yahei f16 fb c100 lh40 tc letter2 bg_grn_119c5b  br4 hoverbg_orgred" @click="subTravelData">发布游记</a>
          </td>
        </tr>
      </table>

    </div><!--创建游记结束-->
    <Footer></Footer>
    <Loading v-show="loadState"></Loading>
  </div>
</template>

<script>
  import Header from '../../components/header'
  import Footer from '../../components/footer'
  import Utils from '../../assets/Util'
  import AMap from 'AMap'
  import wwUpload from '../../components/wwUpload'
  import Loading from '../../components/loading'
  export default {
    name: 'createTravel',
    data(){
      return {
        loadState:true,
        addshowState:false,
        placeAddState:false,
        motionState:false,
        allArea:[],
        province:[],
        city:[],
        Region:[],
        seleprovince:"",
        selecity:"",
        seleregin:"",
        seleprovinceid:"",
        selecityid:"",
        selereginid:"",
        seleprovinceIndex:0,
        selecityIndex:0,
        picList:[],
        getPlaceData:{
          provinceID:0,
          cityID:0,
          pageIndex: 0,
          pageSize: 15
        },
        placeList:[],
        selectPlace:[],
        selectPlaceName:[],
        placeAreaData:{
          province:[],
          city:[],
          Region:[],
          seleprovince:"",
          selecity:"",
          seleregin:"",
          seleprovinceid:"",
          selecityid:"",
          selereginid:"",
          seleprovinceIndex:0,
          selecityIndex:0
        },
        seleMotionList:[],
        selectMotionName:[],
        motionList:[],
        travelData:{
          "userID": "",
          "placeIDs": "",
          "travelsName": "",
          "coverImgUrl": "",
          "listTravelsResource": [],
          "summarize": "",
          "provinceID": 0,
          "cityID": 0,
          "regionID": 0,
          "address": "",
          "token": "",
          "journalType": 0,
          "motionIDs": "",
          "secretLevel": 0
        },
        map:null,
        marker:null,
        mapData:{
          province:"",
          city:"",
          region:""
        }
      }
    },
    components:{
      Header,
      Footer,
      wwUpload,
      Loading
    },
    mounted(){
      this.getEditStatus();
      this.getArea();
      this.initMap();
      this.$nextTick(() => {
        this.getMotionList();
      })
    },
    methods:{
      // 获取热门省市区
      getArea(){
        let that = this;
        let areaProps = {
          url:"/Common/GetArea",
          sCallBack:(res) => {
            let item = res.data.data.listProvince;
            that.allArea = item;
            item.forEach(element => {
              that.province.push({'label':element.name, 'value':element.id})
            });
            that.loadState = false;
            that.mainConState = true;
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(areaProps);
      },
      // 实例化地图
      initMap(){
        let that = this;
        this.map = new AMap.Map("mapCon", {
          zoom:20,
          resizeEnable: true
        });
        this.map.plugin('AMap.Geolocation', function() {
          let geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: 'RB'
          })
          geolocation.getCurrentPosition()
          AMap.event.addListener(geolocation, 'complete', onComplete)
          AMap.event.addListener(geolocation, 'error', onError)
          function onComplete (data) {
            that.marker = new AMap.Marker({
              position: new AMap.LngLat(data.position.lng, data.position.lat),
              title: data.formattedAddress,
              draggable: true,
              cursor: 'move',
              raiseOnDrag: true
            });
            that.map.add(that.marker);
            that.map.setCenter([data.position.lng, data.position.lat]);
            that.travelData.address = data.formattedAddress;
            setTimeout(function () {
              that.getIdByName(data.addressComponent.province, data.addressComponent.city, data.addressComponent.district);
            }, 2000);
          }
          function onError (data) {
            console.log(data);
          }
        })
        this.map.on("click", function (event) {
            let lng = event.lnglat.lng;
            let lat = event.lnglat.lat;
            that.map.setCenter([lng, lat]);
            that.marker.setPosition([lng, lat]);
            that.map.plugin('AMap.Geocoder', function() {
              var geocoder = new AMap.Geocoder({
                city: '010'
              })
              let lnglat = [lng, lat]
              geocoder.getAddress(lnglat, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  that.travelData.address = result.regeocode.formattedAddress;
                  that.getIdByName(result.regeocode.addressComponent.province, result.regeocode.addressComponent.city, result.regeocode.addressComponent.district);
                }
              })
            })
        });
      },
      // 通过地址名字逆查询地址的编号
      getIdByName(province, city, region){
        let listProvince = this.allArea;
        for (let i = 0; i < listProvince.length; i++){
          if(listProvince[i]['name'] === province){
            this.travelData['provinceID'] = listProvince[i]['id'];
            let listCity = listProvince[i]['data'];
            for (let j = 0; j < listCity.length; j++){
              if(listCity[j]['name'] === city){
                this.travelData['cityID'] = listCity[j]['id'];
                let regionList = listCity[j]['data'];
                for (let n = 0; n < regionList.length; n++){
                  if (regionList[n]['name'] === region){
                    this.travelData['regionID'] = regionList[n]['id'];
                  }
                }
              }
            }
          }
        }
      },
      addPlace(){
        this.addshowState = !this.addshowState;
      },
      surePlaceBtn(){
        this.addshowState = false;
      },
      delPlace(index){
        this.selectPlace.splice(index, 1);
        this.selectPlaceName.splice(index, 1);
      },
      getPlace(){
        let props = {
          url:'/Place/GetList',
          data:this.getPlaceData,
          sCallBack:res => {
            if(res.data.code === 1){
              this.placeList = res.data.data;
            }else{
              this.$message.error("请求失败");
            }
            this.loadState = false;
          },
          eCallBack:err => {
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      selectFunPlace(e){
        let eArr = e.split("|");
        let index = eArr[0];
        let name = eArr[1];
        let that = this;
        switch (name) {
          case "province":
            let cityArr = that.allArea[index]["data"];
            that.placeAreaData.city = [];
            cityArr.forEach(element => {
              that.placeAreaData.city.push({'label':element.name, 'value':element.id})
            });
            that.placeAreaData.seleprovinceIndex = index;
            that.placeAreaData.selecity = "请选择";
            that.placeAreaData.seleregin = "请选择";
            that.getPlaceData.provinceID = that.allArea[index]["id"];
            that.getPlaceData.cityID = "";
            break;
          case "city":
            that.placeAreaData.selecityIndex = index;
            that.getPlaceData.cityID = that.allArea[that.placeAreaData.seleprovinceIndex]["data"][index]['id'];
            break;
        }
        this.$nextTick(() => {
          this.loadState = true;
          this.getPlace();
        });
      },
      handleSelectPlaceFun(value){
        this.travelData.placeIDs = value;
        this.selectPlaceName = [];
        let that = this;
        that.placeList.forEach(function (place) {
          if(place.id === value){
            let selectPlace = {
              id:value,
              name:place.placeName
            };
            that.selectPlaceName.push(selectPlace);
          }
        })
      },

      addPic(){
        this.placeAddState = !this.placeAddState;
      },
      reloadImg(data){
        this.loadState = false;
        let Pic = {};
        if(data.flag && data.flag === "2"){
          Pic['fileName'] = data['fileName'];
          Pic['flag'] = 2;
          Pic['thumFileName'] = data['thumFileName'];
          Pic['description'] = "";
          Pic['length'] = 0;
          let img = new Image();
          img.src = data['thumFileName'];
          img.onload = function(){
            Pic['imgWidth'] = img.width;
            Pic['imgHeight'] = img.height;
          };
        }else{
          let upInfo = data.files;
          Pic['fileName'] = upInfo['url'];
          let img = new Image();
          img.src = upInfo['url'];
          img.onload = function(){
            Pic['imgWidth'] = img.width;
            Pic['imgHeight'] = img.height;
          };
          Pic['flag'] = 1;
          Pic['thumFileName'] = "";
          Pic['description'] = "";
          Pic['length'] = 0;
        }
        this.picList.push(Pic);
      },
      // 上传文件加载
      uploadStateFun(){
        this.loadState = true;
      },
      surePicFun(){
        this.addPic();
        for (let i = 0; i < this.picList.length; i++){
          this.travelData.listTravelsResource.push(this.picList[i]);
        }
        this.picList = [];
      },
      deletePics(index){
          this.travelData.listTravelsResource.splice(index, 1);
          console.log(this.travelData.listTravelsResource);
      },
      // 添加轨迹
      addMotion(){
        this.motionState = !this.motionState;
      },
      // 请求用户的轨迹列表
      getMotionList(){
        let props = {
          url:"/Motion/GetList",
          data:{
            "userID": localStorage.getItem("uId"),
            "pageIndex": 0,
            "pageSize": 20
          },
          sCallBack:res => {
            if(res.data.code === 1){
              this.motionList = res.data.data;
            }
          },
          eCallBack:err => {
            console.log(err);
            this.$message.error("用户的轨迹列表请求失败,请稍后再试");
          }
        }
        Utils.myRequest(props);
      },
      // 选择轨迹触发的函数
      handleSelectMotionFun(value){
        this.travelData.motionIDs = value;
        this.selectMotionName = [];
        let that = this;
        that.motionList.forEach(function (motion) {
          if(motion.id === value){
            let selectMotion = {
              id:value,
              name:motion.motionName
            };
            that.selectMotionName.push(selectMotion);
          }
        })
      },
      // 确定添加方法
      sureMotionBtn(){
        this.motionState = false;
      },
      // 删除已选的轨迹
      delMotion(index){
        this.seleMotionList.splice(index, 1);
        this.selectMotionName.splice(index, 1);
      },
      // 提交所有游记信息
      subTravelData(){
         let token = localStorage.getItem('token');
         if (token === null || token === "" || token === "undefined" || typeof token !== "string") {
           this.$message.warning("未登录或登录失效，请登录");
           return false;
         }else{
           this.travelData.token = token;
           this.travelData.userID = localStorage.getItem("uId");
         }
         if(this.travelData['summarize'] === "" || this.travelData['summarize'] === "" || this.travelData['summarize'] === null){
            this.$message.warning("请输入游记心得");
            return false;
         }
         if(this.travelData['listTravelsResource'].length === 0 || this.travelData['listTravelsResource'] === "undefined"){
            this.$message.warning("请上传游记图片或视频");
            return false;
         }
         if(this.selectPlaceName.length > 0){
           let placeIds = [];
           this.selectPlaceName.forEach((place) => {
             placeIds.push(place.id);
           })
           this.travelData.placeIDs = placeIds.toString();
         }
         if (this.selectMotionName.length > 0) {
           let motionIds = [];
           this.selectMotionName.forEach((motion) => {
             motionIds.push(motion.id);
           })
           this.travelData.motionIDs = motionIds.toString();
         }
         this.loadState = true;
         let that = this;
         let pathUrl = "";
         if(this.$route.query.id){
            that.travelData.travelsID = this.$route.query.id;
            pathUrl = "/Travels/Update";
         }else{
           pathUrl = "/Travels/Add";
         }
         let props = {
           url:pathUrl,
           data:this.travelData,
           sCallBack:res => {
             if(res.data.code === 1){
                this.$message.success("游记发布成功");
                setTimeout(() => {
                  that.loadState = false;
                  that.$router.push({path:'/activityList'})
                }, 1000);
             }else if(res.data.code === 4){
                that.refreshToken(that.subTravelData());
             }
           },
           eCallBack:err => {
             console.log(err);
             this.$message.error("游记发布失败，请稍后再试");
             this.loadState = false;
           }
         }
         Utils.myRequest(props);
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      },
      // 判断是修改还是新增
      getEditStatus(){
        let that = this;
        let id = this.$route.query.id;
        if(id){
          let props = {
            url:"/Travels/GetDetail",
            data:{
              "travelsID": id,
              "userID": localStorage.getItem("uId"),
              "pageIndex": 0,
              "pageSize": 0
            },
            sCallBack:res => {
              if (res.data.code === 1){
                this.travelData.summarize = res.data.data.Summarize;
                this.travelData.address = res.data.data.address;
                this.travelData.listTravelsResource = res.data.data.listTravelsResource;
                res.data.data.activityPlaceList.forEach((place) => {
                  let placeObj = {
                    id:place['placeID'],
                    name:place['placeName']
                  }
                  that.selectPlaceName.push(placeObj);
                })
                res.data.data.listMotion.forEach((motion) => {
                  let motionObj = {
                    id:motion['id'],
                    name:motion['motionName']
                  }
                  that.selectMotionName.push(motionObj);
                })
              }else{
                this.$message.error("数据请求失败");
              }
            },
            eCallBack:err => {
              console.log(err);
              this.$message.error("数据请求失败");
            }
          }
          Utils.myRequest(props);
        }
      }
    }
  }
</script>

<style scoped>
  .addPlaceBtn{
    height:38px;
    line-height:38px;
  }
  .addPlaceBtn:hover{
    border:1px solid #f16113;
  }
  .addPicBox{
    width:790px;
  }
  .surePicBtn{
    float:right;
  }
  .UploadList{
    width: 97%;
    border:1px solid #eee;
    border-radius:6px;
    padding:5px;
    background:#f0f0f0;
    margin-top:20px;
  }
  .UploadList li{
    margin-top:5px;
    overflow: hidden;
    position: relative;
  }
  .UploadList li img{
    display:block;
    width:80px;
    height:80px;
    float: left;
  }
  .UploadList li textarea{
    height:80px;
    float:right;
    width:75%;
    line-height:35px;
    text-indent:15px;
  }
  .delShow{
    width:80px;
    height:80px;
    text-align: center;
    line-height:80px;
    position:absolute;
    top:0px;
    left:0px;
    font-size:12px;
    color:#fff;
    background: rgba(0,0,0,0.4);
    opacity: 0;
  }
  .delShow:hover{
    opacity: 1;
    cursor: pointer;
  }
  .playBtn{
    left:27px;
    margin-left:0px;
  }
  .routePlayBtn{
    left:40px;
  }
  #mapCon{
    width:790px;
    height:300px;
    background: #eee;
  }
</style>
